<template>
<l-layout class="l-tab-page" >
    <l-panel>
        <FullCalendar
            :options="calendarOptions"
        />
    </l-panel>
</l-layout>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import bootstrapPlugin from '@fullcalendar/bootstrap';

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        locale:"zh-cn",
        plugins: [ dayGridPlugin,timeGridPlugin, interactionPlugin,bootstrapPlugin],
        buttonText: { today: "今日", month: "月", week: "周", day: "日" },
        titleFormat: { year: 'numeric', month: '2-digit' },
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        dateClick: this.handleDateClick,
      }
    }
  },
  methods:{
      handleDateClick(arg){
          console.log(arg)
      }
  }
}
</script>
<style lang="scss">
.fc .fc-button {
    padding: 2px 4px;
    outline: 0 !important;
}
.fc .fc-button-primary:focus {
    box-shadow:none !important;
}
.fc .fc-button:focus {
    box-shadow:none !important;
}
.fc .fc-button-primary{
    background-color: #409eff;
    border-color: #409eff;
}
.fc .fc-button-primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
}
.fc .fc-button-primary:not(:disabled):active, .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
}
.fc .fc-button-primary:disabled{
    color: #fff;
    background-color: #a0cfff;
    border-color: #a0cfff;
}
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 16px;
    padding: 16px 16px 0 16px;
}
</style>
